<script setup lang='ts'>
  import { onMounted, watch, ref, nextTick } from 'vue';
  import { getAssetsFile } from '@/utils/public';
  import { playState, outcome, cattleLeft, round } from '@/pinia/getter'
  import { controlStore } from '@/pinia/modules/controller';
  const useControlStore = controlStore()
  const cattleImgRef = ref()
  const prop = defineProps({
    poolId:{
      type:Number,
      default:0
    },
    type:{
      type:[String,Number],
      default:0
    }
  })
  watch(playState,()=>{
    if(playState.value) {
      newleftNum.value = -1
    }
  })
  watch(outcome,()=>{
    if(outcome.value == prop.poolId && round.value > 25) {
      // console.log('watch - ', outcome ,'---' , prop.poolId, );
      getLocation()
    }
  })
  const newleftNum = ref<any>(-1)
  const width = window.innerWidth
  let timeout = 0
  let leftNum:any = 0
  const getLocation = ()=>{
    nextTick(()=>{
      leftNum = cattleImgRef.value.getBoundingClientRect().left
      const { offsetWidth=77 } = cattleImgRef.value
      /**
       * 马距离视口左侧距离 leftNum
       * 马的宽度 offsetWidth
       * 屏幕宽度 width
       */
      // console.log('马距离视口左侧距离 leftNum', leftNum);
      // console.log('马的宽度 offsetWidth', offsetWidth);
      /**
       * 当 马距离视口左侧距离 <= 屏幕宽度 - 马的宽度 &&  马距离视口左侧距离 >= 0
       * 视为 捕捉到了马
       */
      if(leftNum <= width-offsetWidth && leftNum > 0 && round.value >= 26) {
        newleftNum.value = leftNum
        useControlStore.getCattleLeftArr(leftNum)
      } else if(outcome.value == prop.poolId) {
        timeout = setTimeout(()=>{
          clearTimeout(timeout)
          if(cattleLeft.value == null) {
            // console.log('setTimeout - ', outcome.value ,'---' , prop.poolId);
            getLocation()
          }
        },100)
      }
    })
  }
  onMounted(()=>{
    if(outcome.value == prop.poolId) {
      // console.log('onMounted - ', outcome.value ,'---' , prop.poolId);
      getLocation()
    }
  })
</script>

<template>
  <div
  ref="cattleImgRef"
  :class="[
    'cattleImg',
    playState?'playCattle':'',
    cattleLeft == newleftNum?'scale':''
  ]"
  >
    <img v-show="cattleLeft != newleftNum" :src="getAssetsFile(`cattle${poolId}.png`)">
    <img v-show="cattleLeft == newleftNum" :src="getAssetsFile(`oncatlle${poolId}.png`)">
    <slot></slot>
  </div>
</template>

<style lang='scss' scoped>
  .cattleImg {
    width: auto;
    height: 53px;
    padding-left: 8px;
    box-sizing: border-box;
    img {
      width: 72px;
      height: 100%;
    }
  }
  .playCattle {
    animation:shake .45s linear infinite alternate;
  }
  @keyframes shake
  {
    0% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(-2deg);
    }
  }
  .scale {
    animation:scale .5s linear 1 alternate ;
  }
  @keyframes scale
  {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.5);
    }
  }
</style>